/**
 * Chart component
 * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#chart
*/
@import (less) "less/font-families.less";

@chart-height: 140px;
@chart-width: 898px;
@chart-bottom-padding: 20px;

.chart {
  position: relative;
  height: @chart-height + @chart-bottom-padding;
  width: 100%;
  padding: 0 8px @chart-bottom-padding 20px;
  margin-top: 0;
  font-size: .6875em;
  font-family: @lucida_sans_serif-1;
  background-color: transparent;
  background-image: url(/images/ajax-loader-bar.gif);
  background-repeat: no-repeat;
  background-position: 340px 60px;
  box-sizing: border-box;

  &Yaxis {
    position: absolute;
    left: -65px;
    top:60px;
    text-align: center;
    vertical-align: middle;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    font-size: 10px;
    color: @olive;
    text-transform: uppercase;
  }
  &Xaxis {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 10px;
    color: @olive;
    text-transform: uppercase;
  }
  &Zoom {
    white-space: nowrap;
  }
  .thisChart {
    height: @chart-height;
    width: 100%;
    overflow-y: hidden;
  }
}

@media all and ( min-width: @width-breakpoint-desktop ) {
  .chart {
    float: left;
    width: @chart-width;
    &Yaxis {
      width: @chart-height;
    }
    .thisChart {
      width: @chart-width;
    }
  }
}
